<template>
  <view class="detail-page">
    <!-- 顶部状态 -->
    <view class="status-section">
      <image class="status-icon" src="@/static/order/icon-check.png" />
      <text class="status-text">已完成</text>
    </view>
    <view style="margin-top: -150rpx">

      <!-- 充电信息 -->
      <view class="info-card">
        <view class="card-title">充电信息</view>
        <view class="info-row">
          <text class="label">订单编号：</text>
          <text class="value">{{ orderInfo.orderNo }}</text>
        </view>
        <view class="info-row">
          <text class="label">充电站：</text>
          <text class="value">{{ orderInfo.stationName }}</text>
        </view>
        <view class="info-row">
          <text class="label">起始时间：</text>
          <text class="value">{{ orderInfo.startTime || '' }} ~ {{ orderInfo.endTime || '' }}</text>
        </view>
        <view class="info-row">
          <text class="label">充电时长：</text>
          <text class="value">{{ formateTime(orderInfo.chargingTime) }}</text>
        </view>
        <view class="info-row">
          <text class="label">充电度数：</text>
          <text class="value">{{ orderInfo.chargingDegree }}度</text>
        </view>
      </view>

      <!-- 费用明细 -->
      <view class="info-card">
        <view class="card-title">费用明细</view>
        <view class="fee-row" v-for="item in orderInfo.orderDetailList.filter(item => item.chargeFee || item.serviceFee)" :key="item.id">
          <text class="label">
            <text class="type" style="margin-right: 6rpx">{{ getType(item.ruleType)}}</text>
            <text style="font-size: 24rpx">{{ item.startTime}} ~ {{ item.endTime }}</text>
          </text>
          <text class="value">¥<text class="money">{{ item.chargeFee }}</text>电费/￥<text class="discount">{{ item.serviceFee }}</text>服务费</text>
        </view>
        <view class="total-fee">
          <text>合计：</text>
          <text class="amount">¥{{ orderInfo.finalFee }}</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <button class="stop-button" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script>
import Navbar from "../../components/navbar.vue";

export default {
  components: {Navbar},
  data() {
    return {
      orderInfo: {
        orderNo: '',
        stationName: '',
        startTime: '',
        endTime: '',
        carInfo: '',
        chargingTime: '0分钟',
        chargingDegree: '0',
        electricityFee: '0',
        serviceFee: '0',
        finalFee: '0',
        orderDetailList: []
      }
    }
  },
  onLoad(options) {
    this.getOrderDetail(options.id)
  },
  methods: {
    getType(type,) {
      let typeMap = {
        // 0123 尖峰平谷
        0: '尖',
        1: '峰',
        2: '平',
        3: '谷'
      }
      return typeMap[type] || type
    },
    formateTime(minutes) {
      if (!minutes) return 0
      if (minutes < 60) {
        return  minutes + '分钟'
      }

      var hours = Math.floor(minutes / 60);
      var remainingMinutes = minutes % 60;
      return hours + "时" + remainingMinutes + "分";
    },
    getOrderDetail(id) {
      // TODO: 调用获取订单详情接口
      this.$api.getOrderDetail({ orderId: id }).then(res => {
        this.orderInfo = {
          orderNo: res.orderNo,
          stationName: res.plotName,
          startTime: res.startTime,
          endTime: res.endTime,
          chargingDegree: res.chargedElectricity,
          electricityFee: res,
          finalFee: res.chargeMoney,
          chargingTime: res.chargedTime,
          orderDetailList: res.orderDetailList || []
        }
      }).finally(() => {
        uni.hideLoading()
      })
    },
    goBack() {
      uni.switchTab({
        url: '/pages/order/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-page {
  min-height: 100vh;
  background: #F5F5F5;
  padding-bottom: calc(88rpx + env(safe-area-inset-bottom));
}

.status-section {
  background-image: url('@/static/order/order_detail_bg.png');
  background-size: 100% 100%;
  border-radius: 0;
  padding: 60rpx 0 180rpx 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .status-icon {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 20rpx;
  }

  .status-text {
    font-size: 36rpx;
    color: #FFFFFF;
    font-weight: 500;
  }
}

.info-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 32rpx;
  margin: 24rpx;

  .card-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 24rpx;
    position: relative;
    padding-left: 20rpx;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 28rpx;
      background: #04C8AE;
      border-radius: 3rpx;
    }
  }

  .info-row {
    display: flex;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    line-height: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      color: #999;
      min-width: 140rpx;
    }

    .value {
      color: #333;
      flex: 1;
      font-size: 24rpx;
    }
  }

  .fee-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    line-height: 40rpx;

    .type {
      font-size: 24rpx;
      color: #04C8AE;
      background: rgba(4, 200, 174, 0.1);
      padding: 4rpx 12rpx;
      border-radius: 4rpx;
    }

    .label {
      color: #333;
      display: flex;
      align-items: center;
      gap: 8rpx;
    }

    .value {
      color: #333;
      font-size: 24rpx;

      .discount {
        color: #FF4D4F;
        padding: 0 6rpx;
      }
      .money {
        color: #04C8AE;
        padding: 0 6rpx;
      }

    }
  }

  .total-fee {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 32rpx;
    padding-top: 24rpx;
    border-top: 2rpx solid #F5F5F5;
    font-size: 28rpx;
    color: #333;

    .amount {
      font-size: 36rpx;
      font-weight: bold;
      margin-left: 8rpx;
    }
  }
}
.bottom-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));

  .stop-button {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #00D1B2;
    color: #FFFFFF;
    font-size: 32rpx;
    border-radius: 44rpx;
    border: none;

    &:active {
      opacity: 0.8;
    }
  }

  .tip-text {
    font-size: 24rpx;
    color: #999;
    text-align: center;
    margin-top: 24rpx;
  }
}

</style>
